<template>
	<div class="short2">
		<aside v-for="it in short2List.upList" :key="it.url">
			<p v-if="it.url==509">{{it.subTitle}}</p>
			<img :src="getImg(it.image)"/>
			<h3>{{it.title}}</h3>
		</aside>
		<ul>
			<li v-for="it in short2List.downList" :key="it.url">
				<img :src="getImg(it.image)"/>
				<label>{{it.title}}</label>
				<p>{{it.subTitle}}</p>
			</li>
		</ul>
		<span>查看更多</span>
	</div>
</template>

<script>
	export default{
		name:'Short2',
		data(){
			return{
				short2List:[]
			}
		},
		methods:{
			getImg(url){
				if (url!='') {
					return url.substring(0,6)==='https'?'https://images.weserv.nl?url='+url.substring(8):'https://images.weserv.nl?url='+url.substring(7)
				}
			}
		},
		created() {
			this.axios.get(`https://m.youxiake.com/api/m/index/part?uid=&sitecode=1&city_id=1&refreshCount=5`).then((res)=>{
				this.short2List=res.data.data.aroundLump.local
				
			}).catch((error)=>{
				console.log(error)
			})
		}
	}
</script>

<style scoped>
	.short2 aside{
		width: 33%;
		display: inline-block;
		margin-left: 0.5%;
	}
	.short2 aside p{
		position: relative;
		top: 0.4rem;
		width: 2.3rem;
		height: 0.4rem;
		border-radius: 0.2rem 0 0.2rem 0;
		background: #13CE66;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.short2 aside img{
		width: 100%;
		height: 3rem;
	}
	.short2 aside h3{
		position: relative;
		bottom: 0.5rem;
		left: 0.3rem;
		color: white;
		font-weight: bold;
		font-size: 0.35rem;
	}
	.short2 aside:first-child{
		width: 65%;
	}
	.short2 ul{
		width: 100%;
		padding-bottom: 0.5rem;
		position: relative;
		bottom: 0.3rem;
	}
	.short2 ul li{
		width: 32%;
		height: 3rem;
		display: inline-block;
		text-align: center;
		margin: 0.5%;
	}
	.short2 ul li img{
		width: 100%;
		height: 3rem;
	}
	.short2 ul li label{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: bold;
		font-size: 0.3rem;
		line-height: 0.6rem;
		display: inline-block;
		width: 99%;
	}
	.short2 ul li p{
		color: gray;
	}
	.short2 span{
		text-align: center;
		display: inline-block;
		width: 100%;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		border-top: 0.01rem solid gainsboro;
		font-size: 0.35rem;
	}
</style>
